<template>
	<view>
		<view class="login-box">
			<view class="row">
				<u--image width="30rpx" height="40rpx" mode="aspectFit" :src="phoneImage"></u--image>
				<!-- <view class="phone-prefix">+86</view> -->
				<view class="margin-left">
					<u--input v-model="param.username" type="text" fontSize="34rpx" :border="false" placeholder="输入帐号"></u--input>
				</view>
			</view>
			<view class="row">
				<u--image width="30rpx" height="40rpx" mode="aspectFit" :src="codeImage"></u--image>
				<view class="margin-left">
					<u--input v-model="param.password" type="password" fontSize="34rpx" :border="false" placeholder="输入密码"></u--input>
				</view>
			</view>
			<view class="row">
				<u--image width="30rpx" height="40rpx" mode="aspectFit" :src="codeImage"></u--image>
				<view class="margin-left">
					<u--input v-model="param.code" fontSize="34rpx" :border="false" placeholder="输入图形验证码"></u--input>
				</view>
				<u--image width="200rpx" height="80rpx" :src="codeUrl" @click="getLoginCodeImg"></u--image>
			</view>
		</view>
		<view class="btn-box">
			<view class="common-btn login-btn" @tap="toLogin">登录</view>
			<view class="flex justify-center">
				<view class="actions">
					<view class="" @tap="check(ModuleEnum.retrieve)">忘记密码</view>
					<view class="margin-lr-sm">|</view>
					<view class="" @tap="check(ModuleEnum.logon)">注册账号</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import phoneImage from "@/static/login/icon-phone.png"
	import codeImage from "@/static/login/icon-code.png"
	import JSEncryptUtils from '@/utils/JSEncrypt.js';
	import {
		ModuleEnum
	} from "../../config"
	import {
		useCheckModule
	} from "../../hooks/useModule"
	import {
		useHandleLogin
	} from "@/hooks/useLogin"
	import {
		getCodeImg
	} from "@/api/Interface/login"
	export default {
		name: "Login",
		data() {
			return {
				phoneImage,
				codeImage,
				ModuleEnum,
				codeUrl: "",
				param: {
					// username: "18999999999",
					// username: "18989898989",
					username: "", // 13666666666 15046055323 qq nanjing02
					password: "", // admin123 Admin123 Nn1234 Admin123
					uuid: "",
					code: ""
				}
			}
		},
		mounted() {
			this.getLoginCodeImg()
		},
		methods: {
			async getLoginCodeImg() {
				await getCodeImg().then(res => {
					this.codeUrl = "data:image/gif;base64," + res.img;
					this.param.uuid = res.uuid;
				});
			},
			check(e) {
				useCheckModule(this, e);
			},
			async toLogin() {

				// if (msg) this.$toast(msg);
				// return;
				// if (!uni.$u.test.mobile(this.param.username)) {
				// 	this.$toast("请输入正确的手机号")
				// 	return;
				// }
				if (uni.$u.test.empty(this.param.username)) {
					this.$toast("请输入帐号")
					return;
				}
				// if (uni.$u.test.empty(this.param.password)) {
				// 	this.$toast("请输入密码")
				// 	return;
				// }
				if (this.param.password === this.param.username) {
					this.$toast("帐号密码相同")
					return;
				}
				if (uni.$u.test.empty(this.param.uuid) || uni.$u.test.empty(this.param.code)) {
					this.$toast("请输入图形验证码")
					return;
				}
				const code = await useHandleLogin({...this.param,password:JSEncryptUtils.encrypt(this.param.password)});
				if (code !== 200) await this.getLoginCodeImg()
			}
		},
	}
</script>

<style scoped>
	@import url("../../css/login.css");
</style>